<template>
  <div id="app">
    <div id="nav">
      <!-- 路由跳转方式一: 使用 `router-link` 标签的to属性来实现跳转 -->
      <!-- tag="li" 可以使用这个属性来改变浏览器对router-link的解析，默认是 解析成a标签 -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <!-- 把to属性写成动态值，里面的内容跟 $router的push() 传递参数写一样即可   -->
      <!-- <router-link to="/user">User</router-link> -->
      <!-- <router-link :to="'/user'">User</router-link> -->
      <router-link :to="{path:'/user'}">User</router-link>
    </div>
    <router-view />
    <hr>
    <button @click="hdClick">点击跳转到user</button>
    <hr>
    <button @click="hdClick1">点击跳转到about并携带query参数</button>&nbsp;
    <button @click="hdClick2">点击跳转到user并携带params参数</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods:{
    // 路由跳转方式二：编程式导航
    hdClick(){
      // 通过 $router对象 进行跳转
      // 方式一：通过路径跳转
      // this.$router.push('/user')
      // this.$router.push({path:'/user'})
      // 方式二：通过name属性(用的相对少一点)  
      this.$router.push({name:'User'})
    },

    // 路由跳转并携带参数的两种方式
    hdClick1(){
      // 查询字符串参数(query传参) xxx?page=1&size=10  xxx/user?id=5
      // this.$router.push({ path:'/about', query:{ page: 1 , pagesize: 10  }})  // path和name跳转无差异，都是加query对象
      this.$router.push({ name:'About', query:{ page: 1 , pagesize: 10  }})
    },
    hdClick2(){
      // pathInfo参数(params传参) xxx/user/5
      // 前提：在路由表中，需要在路劲中配置好参数的传入 
      let userId = 111222333
      // this.$router.push(`/user/${userId}`)
      // this.$router.push({ path:`/user/${userId}`})   // 如果是path方式跳转 , 必须写一个完整路径
      this.$router.push({ name: 'User', params: { userId} }) // 如果是name方式跳转 , 需要在后面写入params参数
    }

    // 两种方式其实都可以互换使用，看业务需求而异
    // 个人更偏向于query使用，因为不用改变路由配置表..
  }
};
</script>


<style lang="less">
#app {
  text-align: center;
}
</style>
